<template>
  <!--  :data = 绑定模型数据里的数据
        style="width: 100%" 宽度占满全屏
        stripe 斑马条纹
        border 边框

        prop="date" 绑定data对象数据里的date
  -->
  <div>
    <el-table
      border
      stripe
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>

    <!--
      total:分页组件计算总页数
      page-size: 每页数据条数
      current-page:当前第几页
      v-bind 简写方式  :属性名=“vue实例中的值”
      v-on@current-change="pageQuery" 简写方式 @current-change="pageQuery"给标签元素绑定一个函数
    -->
    <el-pagination
      background
      align="right"
      layout="prev, pager, next"
      :total="total"
      :page-size="pageParam.pageSize"
      :current-page="pageParam.currentPage"
      @current-change="pageQuery"

    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'MeWorld',
  data() {
    return {
      //表格数组
      tableData: [],
      //分页对象
      pageParam: {
        currentPage: 1,
        pageSize: 10
      },
      //总条数
      total: undefined
    }
  },

  //我们可以使用 methods 属性给 Vue 定义方法
  methods: {
    pageQuery(pageNum) {
      //如果currenPage有值。就把回显的值赋值给data的对象属性中。然后发送请求
      if (pageNum) {
        this.pageParam.currentPage = pageNum
      }
      this.$http.get("/dept/list", this.pageParam).then(res => {
        console.log(res)
        //把后端返回的数据赋值给模板的数组tableData
        this.tableData = res.data.rows;
        this.total = res.data.total;
      }).catch(res => {
        this.$message.error('服务器忙，请稍后重试');
      })
    }
  },
  //mounted是vue中的一个钩子函数，一般在初始化页面完成后.调用函数pageQuery，加载数据
  mounted() {
    this.pageQuery()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
